<template>
<div class="home-page">
   <vue-particles class="particles-bg" color="#1B1B1F" :particleOpacity="0.9" :particlesNumber="80" shapeType="circle" :particleSize="4" linesColor="#404958" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
    </vue-particles>
  <a-layout>
    <a-layout-header>
      <h3>PC开源作品概览——webkubor</h3>
    </a-layout-header>
    <a-layout-content >
      <a-row class="page-content" :gutter="20" type="flex" align="middle">
        <a-col :span="8">
          <a-card title="动态地图" class="page-card">
            <a slot="extra" href="#" @click="$router.push('/earth')">了解更多</a>
            <img src="https://tva1.sinaimg.cn/large/0081Kckwly1gkaxkq19nwj31ik0u0nju.jpg" @click="$router.push('/earth')">
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="简洁看板" class="page-card">
            <a slot="extra" href="#" @click="$router.push('/factory')">了解更多</a>
            <img src="https://tva1.sinaimg.cn/large/0081Kckwly1gkaxh8sd11j31j80u0dwc.jpg" @click="$router.push('/factory')">
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="生产看板" class="page-card">
            <a slot="extra" href="#" @click="$router.push('/analysis')">了解更多</a>
            <img src="https://tva1.sinaimg.cn/large/0081Kckwly1gkaxfpzo9nj31ie0u0jvg.jpg" @click="$router.push('/analysis')">
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="中国地图下钻" class="page-card">
            <a slot="extra" href="#" @click="$router.push('/china')">了解更多</a>
            <img src="@/assets/map/demo.gif" @click="$router.push('/china')">
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="二次元人物-看板小娘" class="page-card">
            <a slot="extra" href="#" @click="toOtherWeb('https://web-kubor.gitee.io/mycon-show/')">了解更多</a>
            <img src="@/assets/2D-girl.gif" @click="toOtherWeb('https://web-kubor.gitee.io/mycon-show/')">
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="电子简历生成器" class="page-card">
            <a slot="extra" href="#" @click="toOtherWeb('https://web-kubor.gitee.io/resume/')">了解更多</a>
            <img src="https://tva1.sinaimg.cn/large/0081Kckwly1gkehe454umj31je0u00x8.jpg" @click="toOtherWeb('https://web-kubor.gitee.io/resume/')">
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="文档型工作博客" class="page-card">
            <a slot="extra" href="#" @click="toOtherWeb('https://web-kubor.gitee.io/vue-blog/')">了解更多</a>
            <img src="https://tva1.sinaimg.cn/large/0081Kckwly1gkehio0ehdj31ih0u0myd.jpg" @click="toOtherWeb('https://web-kubor.gitee.io/vue-blog/')">
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="文档型工作博客" class="page-card">
            <a slot="extra" href="#" @click="toOtherWeb('https://wangenbo.cn/')">了解更多</a>
            <img src="https://tva1.sinaimg.cn/large/0081Kckwly1gkei1ei4s5j31im0u0ah7.jpg" @click="toOtherWeb('https://wangenbo.cn/')">
          </a-card>
        </a-col>
          <a-col :span="8">
          <a-card title="空白看板" class="page-card">
            <a slot="extra" href="#" @click="$router.push('/board')">了解更多</a>
            <img src="https://tva1.sinaimg.cn/large/0081Kckwly1gkay8ol0yvj31fq0u0n0s.jpg" @click="$router.push('/board')">
          </a-card>
        </a-col>

      </a-row>
    </a-layout-content>
    <a-layout-footer>
      作者邮箱:webkubor@163.com
    </a-layout-footer>
  </a-layout>
</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toOtherWeb(target) {
      location.href = target
    }
  },
}
</script>

<style lang="less" scoped>
.home-page {
  background: #F0F2F5;
  position: relative;
  .particles-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  h3 {
    margin-bottom: 16px;
    color: #ffffff;
  }

  .page-content {
    padding: 20px;
  }


  .page-card {
    cursor: pointer;
    margin: 10px 0;
    background: #ffffff;
  }

  img {
    width: 100%;
  }

  button {
    margin-top: 16px;
  }
}
</style>
